<script setup>
import { onMounted, reactive, ref } from "vue";
import { useRouter } from 'vue-router'
import { login } from '../api/index'
import { setToken, setAccount } from '../utils/auth'
const router = useRouter() //实例化
import { useTabsStore } from '../store/store'
import { messageCreate } from "../api/message/message";

const state = reactive({
    loginForm: {
        username: '',
        password: ''
    },
    loginRules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
    },
})

const loginForm = ref(0)
const loginSubmit = () =>
{
    loginForm.value.validate(async (valid) =>
    {
        if (valid) {
            // 表单验证成功，执行登录操作
            // 可以在这里向服务器发送请求验证用户名和密码
            console.log(state.loginForm)
            login(state.loginForm).then(res =>
            {
                console.log(res.token);
                setToken(res.token)
                setAccount(res.data.UserName)
                const useData = useTabsStore()
                useData.setUserData(res.data)
                ElMessage({
                    showClose: true,
                    message: '登录成功',
                    type: 'success',
                })
                messageCreate({ userId: useData.getUserData().userID, message: `${useData.getUserData().userName}用户 登录了系统`, operationType: 'login' })
                setTimeout(() =>
                {
                    router.push('/home')
                }, 2000)
            }).catch(err =>
            {
                ElMessage({
                    showClose: true,
                    message: err.response.data.meta.msg,
                    type: 'error',
                })
            })
        }
    })
}
// 跳转到注册页面
const toRegister = () =>
{
    router.push('/register')
}
const getIpClient = async () =>
{
    const baseIP = import.meta.env.BASE_IP;
    console.log(baseIP); // 输出BASE_IP的值
}
onMounted(() =>
{
    getIpClient()

})

</script>

<template>
    <div class="container min-h-screen min-w-full flex flex-col items-centers">
        <div class="loginPop">
            <el-row class="h-10 leading-10">
                <el-col :span="24" class="text-sky-400 text-center text-2xl title">用户登录</el-col>
            </el-row>
            <el-form ref="loginForm" :model="state.loginForm" :rules="state.loginRules" label-width="80px"
                class="login-form">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="state.loginForm.username" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="state.loginForm.password" type="password" autocomplete="off"></el-input>
                </el-form-item>
                <div class="flex justify-evenly mt-6">
                    <el-button type="primary" @click="loginSubmit">登录</el-button>
                    <el-button type="danger" @click="toRegister">注册</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<style lang="scss" scoped>
.container {
    position: relative;
    /* 背景颜色设置为黑色 */
    overflow: hidden;

    /* 隐藏溢出的内容 */
    .loginPop {
        /* 元素清晰 */
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
        /* 可以添加其他样式以美化 .loginPop */
    }
}

.container::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("../assets/ifont/pic/bg.jpg") no-repeat;
    transform: scaleX(-1);
    background-size: cover;
    background-position: center;
    filter: blur(1px);
    /* 背景图片模糊 */
    z-index: -1;
    /* 位于容器背后 */
}

:deep .el-form-item__label {
    color: rgb(24, 24, 24);
}

.title {
    font-weight: 800;
    -webkit-text-stroke: 0.2px rgb(255, 255, 255)
}
</style>